<template>
  <div>
    <h2>轮播图列表</h2>
    <el-table :data="Rotation" height="83vh" style="width: 100%">
      <el-table-column prop="bannerid" label="轮播图编号" width="180" />
      <el-table-column label="图片" width="180">
        <template #default="scope">
          <img :src="scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column prop="alt" label="图片提示" />
      <el-table-column prop="link" label="图片来源" />
      <el-table-column prop="flag" label="启用状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.flag"
            @change="(val:boolean)=>updateRotation(scope.row.bannerid,val)"
          />
        </template>
      </el-table-column>
      <!-- 记得添加#default="scope" -->
      <el-table-column label="删除" #default="scope">
        <el-button
          @click="deleteRotation(scope.row.bannerid)"
          type="danger"
          :icon="Delete"
          circle
        ></el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { Delete } from "@element-plus/icons-vue"; //导入element的图标库
import { reactive } from "vue";
import service from "../../../utils/service";

const Rotation = reactive<myRotation[]>([]);

interface myRotation {
  link: string;
  img: string;
  alt: string;
  bannerid: string;
  flag: boolean; //规定Rotation对象各个属性的类型
}

//获取
const getRotation = () => {
  service({
    url: "/banner/list",
  }).then((res: any) => {
    if (res.data.code === "200") {
      Rotation.length = 0;
      Rotation.push(...res.data.data);
    }
  });
};
getRotation();

//更新
const updateRotation = (bannerid: string, val: boolean) => {
  service({
    url: "/banner/updateFlag",
    method: "post",
    data: {
      bannerid: bannerid,
      flag: val,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      console.log(val);
    }
  });
};

//删除
const deleteRotation = (bannerid: string) => {
  service({
    url: "/banner/delete",
    params: {
      bannerid,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      getRotation();
      console.log(res.data.code);
    }
  });
};
</script>

<style scoped>
img {
  width: 100%;
  object-fit: cover;
}

.cell {
  text-align: center;
}
</style>